<template>
  <view class="list">
    <view class="item" v-for="(item, index) in lines" :key="index">
      <view class="title">{{ item.name }}</view>
      <template v-if="item.sections && item.sections.length">
        <view class="nst" v-for="(dt, idx) in item.sections" :key="idx">
          <view class="icon">
            <image src="../../static/nt2-2.png" class="img"></image>
          </view>
          <view class="right">
            <view class="name" :class="{ not: dt.percentage >= 90 }">{{ dt.name }}</view>
            <view class="desc">时长{{ dt.video_duration }} <template v-if="dt.percentage >= 90"> | 已学完</template></view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  lines: {
    type: Array,
    default: () => []
  }
})
</script>

<style lang="scss" scoped>
  .list{
    padding: 0 30rpx;
    padding-top: 34rpx;
    .item{
      .nst{
        display: flex;
        align-items: flex-start;
        padding-bottom: 46rpx;
        width: 100%;
        .icon{
          width: 33rpx;
          height: 33rpx;
          font-size: 0;
        }
        .right{
          padding-left: 20rpx;
          flex: 1;
          .desc{
            font-size: 22rpx;
            color: rgba($color: #000, $alpha: .4);
          }
          .name{
            font-weight: 400;
            font-size: 26rpx;
            color: #000000;
            padding-bottom: 10rpx;
            &.not{
              color: rgba($color: #000, $alpha: .4);
            }
          }
        }
      }
      .title{
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
        padding-bottom: 46rpx;
      }
    }
  }
</style>